<template>
	<!-- 基金排行 -->
	<view class="container" style="height: 100vh;background-color: #FFFFFF;">
		<!-- #ifndef MP-WEIXIN -->
		<view class="header">
			<view class="header-container">
				<view><i class="cuIcon-back" style="color: #333333;font-size: 50rpx;"></i></view>
				<view class="title" style="color: #333333;">
					全部基金
				</view>
				<view><i class="cuIcon-apps" style="color: #333333;font-size: 50rpx;"></i></view>
			</view>
		</view>
		<!-- #endif -->
		<scroll-view scroll-y class="scroll">
			<view class="popularFunds">
				<view class="popularFunds-content">
					<view class="titles">
						<scroll-view scroll-x class="titles-scroll" @scrolltoupper="change">
							<view class="title-item" v-for="(item,index) in popularFunds" :key="item.id"
								:class="index == popularFundsId ? 'active' : ''" @tap="changeId(index)">
								{{item.text}}
							</view>
						</scroll-view>
					</view>
					<view class="swipers">
						<swiper class="swiperList" :current="popularFundsId" duration="500" @change="changeTabId">
							<swiper-item v-for="(item) in popularFunds" :key="item.id" class="swiper-item">
								<scroll-view scroll-y @scrolltolower="onRechBottom">
									<view class="goodsList">
										<view class="itme-box">
											<view class="h-table">
												<view class="h-tr h-tr-3 h-thead">
													<view class="h-td" style="background-color:rgba(55,125,255,0.8);color: #FFFFFF;" v-for="(item) in thead" :key="item.id">{{item.text}}</view>
												</view>
												<view class="h-tr h-tr-3">
													<view class="h-td" v-for="(items) in thead" :key="items.id" >-</view>
												</view>
											</view>
										</view>
									</view>
								</scroll-view>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>


</template>

<script>
	export default {
		data() {
			return {
				popularFunds: [{
						id: 1,
						text: '推荐'
					},
					{
						id: 2,
						text: '稳健之选'
					},
					{
						id: 3,
						text: '长跑之选'
					},
					{
						id: 4,
						text: '港股精选'
					},
					{
						id: 5,
						text: '港股精选'
					},
					{
						id: 6,
						text: '港股精选'
					},
					{
						id: 7,
						text: '港股精选'
					},
				],
				popularFundsId: 0,
				popularFundsData: [{
						id: 1,
						title: '广发资源优选A股',
						tag: '政策利好',
						prcent: '88.23%',
						ranking: '前5%',
						content: '周期行业',
						contents: '大宗商品 库存低位'
					},
					{
						id: 2,
						title: '南方新优享混合',
						tag: '',
						prcent: '55.30%',
						ranking: '前10%',
						content: '大国制造',
						contents: '基建制造 转型升级'
					},
					{
						id: 3,
						title: '汇添富双利债券A',
						tag: '政策利好',
						prcent: '79.36%',
						ranking: '前10%',
						content: '长青板块',
						contents: '白酒+消费内循环'
					}
				],
				thead:[
					{id:1,text:'基金名称'},
					{id:2,text:'单位净值'},
					{id:3,text:'一周收益'},
					{id:4,text:'一月收益'},
					{id:5,text:'三月收益'},
				]
			}
		},
		methods: {
			changeTabId(e) {
				this.popularFundsId = e.detail.current
			},
			onRechBottom() {

			},
			changeId(index) {
				this.popularFundsId = index
			},
			change() {
				console.log(123)
			}
		}
	}
</script>

<style scoped lang="scss">
	@import '../../static/helang-table.scss';
	.header {
		height: 180rpx;
		background-color: #FFFFFF;
		overflow: hidden;

		.header-container {
			width: 100%;
			height: 120rpx;
			box-sizing: border-box;
			padding: 30rpx;
			line-height: 120rpx;
			margin-top: 50rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.title {
				color: #FFFFFF;
				font-size: 40rpx;
				font-weight: bold;
			}

			input {
				background-color: #FFFFFF;
				width: 60vw;
				height: 60rpx;
				border-radius: 30rpx;
				padding-left: 70rpx;
				background-image: url(../../static/wealth/search.png);
				background-repeat: no-repeat;
				background-size: 25rpx 25rpx;
				background-position: 25rpx 15rpx;
			}

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}

	.popularFunds {
		box-sizing: border-box;
		.popularFunds-content {
			.titles {
				width: 100%;
				height: 100rpx;
				color: #999999;
				background-color: #FFFFFF;
				line-height: 75rpx;

				.titles-scroll {
					white-space: nowrap;
					height: 100%;
					.title-item {
						width: 150rpx;
						display: inline-block;
						text-align: center;
					}

					.active {
						padding: 5rpx 25rpx;
						color: #3476f1;
						box-sizing: border-box;
						border-bottom: 5rpx solid #3476f1;
					}

					// }
				}
			}

			.swipers {
				height: 600rpx;

				.swiperList {
					height: 100%;

					.goods-item {
						height: 200rpx;

						.cu-item {
							margin: 0;
							height: 100%;
							padding: 20rpx 20rpx;
							box-sizing: border-box;

							.title {
								font-size: 30rpx;
								color: #333333;
								font-weight: bold;
							}

							.container {
								display: flex;
								justify-content: space-between;
								height: 100%;
								padding-bottom: 20rpx;

								.first {
									display: flex;
									flex-direction: column;
									justify-content: space-evenly;
									text-align: center;

									.counts {
										font-size: 40rpx;
										color: #f85656;
										font-weight: bold;
									}

									.count {
										color: #333333;
										font-size: 35rpx;
										font-weight: bold;
									}

									.label {
										color: #999999;
										font-size: 24rpx;
									}
								}
							}
						}
					}
				}
			}
		}
	}
</style>
